<template>
    <div class="Tabs">
        <div class="TabsView" v-if="list.data&&list.data.length > 0" :style="{'background': list.BgColor}">
            <div v-for="(item,index) in list.data" :key="index" >
                <div class="TabsItem" @click="TabsChange(index)" >
                    <div style="padding: 14px 12px;" v-if="list.Style == 'One'">
                        <span class="TabsName" :style="{color: index == current?list.SelectColor:list.FontColor,}">{{item.name}}</span>
                        <div class="TabsLine" :style="{'border-color': index == current?list.LineColor:'#fff'}"></div>
                    </div>
                    <div v-else class="TabsTwo" style="background: #E6B738;" :style="{background: index == current?list.BgCurrentColor:'',}">
                        <span :style="{color: index == current?list.SelectColor:list.FontColor,}">{{item.name}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div v-else style="padding: 20px;color:#999">
            请添加标签
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Tabs',
        props: ['data'],
        data() {
            return {
                list: {},
                current: 0,
            }
        },
        mounted() {
            this.list = this.data
            console.log(this.list);
        },
        methods: {
            TabsChange(row) {
                this.current = row
            },
        },
    }
</script>

<style lang="less" scoped>
    .Tabs {
        .TabsView {
            padding: 0 10px;
            box-sizing: border-box;
            /* width: 400px; */
            /* overflow-x: auto; */
            display: flex;
            align-items: center;

            .TabsItem {
                width: max-content;
                position: relative;
                /* padding: 14px 12px; */

                .TabsName {
                    /* color: #E6B738; */
                }

                .TabsLine {
                    border-bottom: 4px solid;
                    width: 30px;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .TabsTwo {
                padding: 4px 16px;
                border-radius: 30px;
                margin: 10px 5px 10px 0;
            }
        }
    }
</style>